<template>
    <div class="wrap">
        <div class="header">
            <h1>商品列表</h1>
            <el-button @click="open = true" type="primary" class="btns">
                添加商品
            </el-button>
        </div>
        <el-drawer v-model="open" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">添加商品</h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left">
                        <CircleCloseFilled />
                    </el-icon>
                    关闭
                </el-button>
            </template>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="分类列表" prop="list">
                    <el-input v-model="ruleForm.list" disabled></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="price">
                    <el-input v-model="ruleForm.price" type="number" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="number">
                    <el-input v-model="ruleForm.number" type="number" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="weight">
                    <el-input v-model="ruleForm.weight" type="number" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">立即添加</el-button>
                    <el-button @click="resetForm()">重置信息</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        <el-table :data="tabelDataCom" style="width: 100%">
            <el-table-column type="index" label="序号" width="80" :index="(this.currentPage - 1) * this.pageSize +1"></el-table-column >
            <el-table-column class-name="pro-name" prop="goods_name" label="名称" width="300"></el-table-column>
            <el-table-column sortable prop="goods_price" label="原价" width="180">
                <!-- sortable是el-table-column中的排序属性 -->
            </el-table-column>
            <el-table-column sortable prop="goods_id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="goods_number" label="数量" width="180"></el-table-column>
            <el-table-column label="操作" width="180">
                <template v-slot:default="xxx">
                    <!-- <el-button @click="delPro(xxx.row)">删除</el-button> -->
                    <!-- 确定删除？ -->
                    <el-popconfirm width="220" confirm-button-text="确定删除" cancel-button-text="不用了，谢谢" :icon="InfoFilled"
                        icon-color="#626AEF" title="确定删除这个商品吗?"
                        @confirm="delPro(xxx.row)"
                        >
                        <template #reference>
                            <el-button>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
      
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage"  v-model:page-size="pageSize"/>
        <!-- 居中 -->

    </div>
</template>

<script>
import { proList, removeProList, addPro } from '@/api/goods.js'
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { defineComponent } from 'vue';

export default defineComponent({
    components: {
        CircleCloseFilled
    },
    data() {
        return {
            list: [],
            total: 511,
            pageSize: 10,
            page: 1,
            currentPage: 1,
            //控制抽屉显示
            open: false,
            ruleForm: {
                name: "",
                list: "1,2,3",
                price: "",
                number: "",
                weight: "",
            },
            rules: {
                name: [
                    { required: true, message: "请输入商品名称", trigger: "blur" },
                    { min: 1, message: "长度不得少于一个字", trigger: "blur" },
                ],
            },
            dialogVisible: false
        }
    },
    mounted() {
        this.getProList()

    },
    computed: {
        tabelDataCom() {
            return this.list.slice(
                (this.currentPage - 1) * 10,
                (this.currentPage - 1) * 10 + 10
            );
        },
    },
    methods: {
        getProList() {
            proList({ pagenum: this.page, pagesize: this.total }).then(res => {
                console.log(res)
                this.list = res.data.data.goods;
                // 更新总数
                this.total = res.data.data.total;
                console.log(this.total)
            })
        },
        //删除弹出提示框
        delPro(proItem) {
            removeProList({ id: proItem.goods_id }).then((res) => {
                // console.log(res);
                if (res.status == '200') {
                    this.getProList();
                }

            });

        },
        //重置信息
        resetForm() {
            this.ruleForm.name = ''
            this.ruleForm.list = ''
            this.ruleForm.price = ''
            this.ruleForm.number = ''
            this.ruleForm.weight = ''
        },
        //添加商品
        submitForm() {
            addPro({
                goods_name: this.ruleForm.name,
                goods_cat: this.ruleForm.list,
                goods_price: this.ruleForm.price,
                goods_number: this.ruleForm.number,
                goods_weight: this.ruleForm.weight,
            }).then(res => {
                if (res.data.meta.status === 201) {
                    this.resetForm()
                    this.open = false
                    this.getProList()
                }
            })
        }

    }
})
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.btns {
    float: left;
    width: 100px;
    margin: 15px;
}
</style>